<template>
  <div class="resource">
    <el-card shadow="hover">
      <div style="margin-bottom: 10px;">
        <i class="el-icon-search" />
        <span>筛选搜索</span>
        <div style="display: inline-block; margin-left: 20px;" v-if="openFlag">
          <el-button
            @click="search"
            icon="el-icon-search"
            size="mini"
            type="primary"
            >搜索</el-button
          >
          <el-button
            icon="el-icon-folder-opened"
            type="cyan"
            size="mini"
            @click="openSearch"
            >展开</el-button
          >
          <el-button @click="cancelData" icon="el-icon-refresh" size="mini"
            >重置</el-button
          >
        </div>
        <div style="display: inline-block; margin-left: 20px;" v-if="!openFlag">
          <el-button
            @click="search"
            icon="el-icon-search"
            type="primary"
            size="mini"
            >搜索</el-button
          >
          <el-button
            @click="openSearch"
            icon="el-icon-folder-opened"
            type="cyan"
            size="mini"
            >收起</el-button
          >
          <el-button @click="cancelData" icon="el-icon-refresh" size="mini"
            >重置</el-button
          >
        </div>
      </div>
      <el-row :gutter="20">
        <el-form
          ref="params"
          :model="params"
          label-width="130px"
          size="small"
          class="searchForm"
        >
          <el-col :span="6">
            <el-form-item label="咨询公司:" prop="companyName">
              <el-input
                v-model="params.companyName"
                size="small"
                clearable
                @clear="search"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单编号:" prop="orderSn">
              <el-input
                v-model="params.orderSn"
                size="small"
                clearable
                @clear="search"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单状态:" prop="state">
              <el-select
                v-model="params.state"
                filterable
                placeholder="请选择"
                clearable
                @change="search"
              >
                <el-option
                  v-for="item in stateOptions"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="咨询服务:" prop="state">
              <el-select
                v-model="params.consult"
                filterable
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in consultList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="咨询费支付:" prop="state" v-if="!openFlag">
              <el-select
                v-model="params.consultState"
                filterable
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in consultListStates"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系人:" prop="dockingPeople" v-if="!openFlag">
              <el-input
                v-model="params.dockingPeople"
                size="small"
                clearable
                @clear="search"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="联系电话:"
              prop="dockingPhone"
              v-if="!openFlag"
            >
              <el-input
                v-model="params.dockingPhone"
                size="small"
                clearable
                @clear="search"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="物流单号:" prop="wuLiu" v-if="!openFlag">
              <el-input
                v-model="params.wuLiu"
                size="small"
                clearable
                @clear="search"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- <el-form-item label="证书类型:" prop="status">
              <el-autocomplete
                class="inline-input"
                v-model="params.categoryName"
                :fetch-suggestions="querySearch"
                placeholder="请输入内容"
                value-key="categoryName"
                clearable
              ></el-autocomplete>
            </el-form-item> -->
            <el-form-item
              label="证书名称:"
              prop="certificateName"
              v-if="!openFlag"
            >
              <el-input
                v-model="params.certificateName"
                size="small"
                clearable
                @clear="search"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="电子出证日期:"
              v-if="!openFlag"
              prop="createTime"
            >
              <el-date-picker
                v-model="params.edHisDate"
                type="date"
                placeholder="选择日期"
                @change="search"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="纸质出证日期:"
              v-if="!openFlag"
              prop="createTime"
            >
              <el-date-picker
                v-model="params.paperHisDate"
                type="date"
                placeholder="选择日期"
                @change="search"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </el-card>

    <div class="container">
      <div class="handle-box">
        <!-- <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd"
          class="mr10"
          >新增</el-button
        > -->
        <el-button
          type="danger"
          icon="el-icon-delete"
          class="handle-del mr10"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          >批量删除</el-button
        >
      </div>

      <!-- <el-card shadow="hover">
        <h4 style="margin-bottom:10px">已接单列表</h4> -->
      <el-table
        max-height="550"
        v-loading="loading"
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column
          type="selection"
          width="50"
          align="center"
        ></el-table-column> -->
         <!-- 二级菜单 -->
         <el-table-column type="expand">
            <template slot-scope="props">
              <h3>订单列表</h3>
              <el-table
                :data="props.row.certificateOrderList"
                border
                header-cell-style="color: #515a6e;background:#f8f8f9"
                style="width: 100%">
                <!-- <el-table-column
                    type="selection"
                    width="50"
                    align="center"
                  ></el-table-column> -->
                   <el-table-column
          prop="orderSn"
          label="订单编号"
          align="center"
          min-width="200"
        
        >
          <template slot-scope="scope">
            <span
              class="blue"
              style="text-decoration: underline; margin-left: 5px"
              @click="handleEdit(scope.$index, scope.row)"
              >{{ scope.row.orderSn }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="certificateName"
          label="证书名称"
          align="center"
          min-width="150"
          :show-overflow-tooltip="true"
        
        ></el-table-column>
        <el-table-column prop="address" align="center" width="120" show-overflow-tooltip label="客户地址"></el-table-column>
        <el-table-column prop="actualAddress" align="center" width="120" show-overflow-tooltip label="办公地址"></el-table-column>
        <el-table-column prop="region" align="center" width="120" show-overflow-tooltip label="经营范围"></el-table-column>
        <el-table-column label="规格说明" align="center" min-width="200">
          <template slot-scope="scope">
            {{ scope.row.specName }}
          </template>
        </el-table-column>
        <el-table-column label="是否咨询" align="center" width="150">
          <template slot-scope="scope">
            {{status_consult(scope.row.consult)}}
          </template>
        </el-table-column>
        <el-table-column label="咨询费是否支付" align="center" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.consultState=='0'">未支付</span>
            <span v-else style="color:blue">已支付</span>
          </template>
        </el-table-column>
        <el-table-column
          label="咨询公司"
          min-width="150"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.companyName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="dockingPeople"
          label="对接人"
          align="center"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="dockingPhone"
          label="联系电话"
          align="center"
          min-width="150"
        ></el-table-column>
        <el-table-column label="营业执照" min-width="150" align="center">
          <template slot-scope="scope">
            <viewer >
              <img
                v-if="scope.row.businessLicense != null"
                class="study_pic"
                :src="showUrl + JSON.parse(scope.row.businessLicense)[0]"
                alt=""
              />
            </viewer>
          </template>
        </el-table-column>
        <el-table-column label="出证日期(电子)" align="center" width="155">
          <template slot-scope="scope">
            {{ formatT(scope.row.edHisDate) }}
          </template>
        </el-table-column>
        <el-table-column label="出证日期(纸质)" align="center" width="155">
          <template slot-scope="scope">
            {{ formatT(scope.row.paperHisDate) }}
          </template>
        </el-table-column>
        <el-table-column label="订单状态" align="center" min-width="150">
          <template slot-scope="scope">
            <span>{{ status(scope.row.state) }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="price"
          label="证书金额"
          align="center"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="orgName"
          label="机构名称"
          align="center"
          min-width="150"
        ></el-table-column>
        <el-table-column
          label="审核老师"
          align="center"
          min-width="150"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            {{ scope.row.teacherName }}
          </template>
        </el-table-column>
        <el-table-column
          prop="wuLiu"
          label="物流单号"
          align="center"
          min-width="150"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="remarks"
          label="备注说明"
          align="center"
          min-width="150"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="创建时间" align="center" min-width="155">
          <template slot-scope="scope">{{
            formatT(scope.row.createTime)
          }}</template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="200"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleEdit(scope.$index, scope.row)"
              >查看</el-button
            >
            <!-- <el-button
              type="text"
              @click="handleProcess(scope.row)"
            >流程
            </el-button> -->
            <el-button
              type="text"
              @click="handleEditOrder(scope.$index, scope.row)"
              v-hasPermi="['update']"
              v-if="scope.row.state == 4 || scope.row.state == 5 || scope.row.state == 6 || scope.row.state == 7"
              >编辑</el-button
            >
                        <el-button
              type="text"
              @click="handleProcess(scope.row)"
            >流程
            </el-button>
            <!-- <el-button
              type="text"
              @click="handleUpload(scope.$index, scope.row)"
              v-if="scope.row.state == 5 || scope.row.state == 6 || scope.row.state == 7
              "
              >电子证书</el-button
            > -->
            <!-- <el-button></el-button> -->
            <!-- <el-button
              type="danger"
              size="mini"
              @click="handleDelete(scope.row)"
              >删除</el-button
            > -->
          </template>
        </el-table-column>
               
          </el-table>
        </template>
        </el-table-column>
        <!-- <el-table-column
          prop="orderSn"
          label="订单编号"
          align="center"
          min-width="200"
        
        >
          <template slot-scope="scope">
            <span
              class="blue"
              style="text-decoration: underline; margin-left: 5px"
              @click="handleEdit(scope.$index, scope.row)"
              >{{ scope.row.orderSn }}</span
            >
          </template>
        </el-table-column> -->
        <!-- <el-table-column
          prop="certificateName"
          label="证书名称"
          align="center"
          min-width="150"
          :show-overflow-tooltip="true"
        
        ></el-table-column>
        <el-table-column label="规格说明" align="center" min-width="200">
          <template slot-scope="scope">
            {{ scope.row.specName }}
          </template>
        </el-table-column> -->
        <el-table-column label="是否咨询" align="center" width="150">
          <template slot-scope="scope">
            {{status_consult(scope.row.consult)}}
          </template>
        </el-table-column>
        <el-table-column label="咨询费是否支付" align="center" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.consultState=='0'">未支付</span>
            <span v-else style="color:blue">已支付</span>
          </template>
        </el-table-column>
        <!-- <el-table-column
          label="咨询公司"
          min-width="150"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.companyName }}</span>
          </template>
        </el-table-column> -->
        <el-table-column
          prop="dockingPeople"
          label="对接人"
          align="center"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="sysName"
          label="业务人员"
          align="center"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="dockingPhone"
          label="联系电话"
          align="center"
          min-width="150"
        ></el-table-column>
        <el-table-column label="营业执照" min-width="150" align="center">
          <template slot-scope="scope">
            <viewer >
              <img
                v-if="scope.row.businessLicense != null"
                class="study_pic"
                :src="showUrl + JSON.parse(scope.row.businessLicense)[0]"
                alt=""
              />
            </viewer>
          </template>
        </el-table-column>
        <el-table-column label="出证日期(电子)" align="center" width="155">
          <template slot-scope="scope">
            {{ formatT(scope.row.edHisDate) }}
          </template>
        </el-table-column>
        <el-table-column label="出证日期(纸质)" align="center" width="155">
          <template slot-scope="scope">
            {{ formatT(scope.row.paperHisDate) }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="订单状态" align="center" min-width="150">
          <template slot-scope="scope">
            <span>{{ status(scope.row.state) }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="price"
          label="证书金额"
          align="center"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="orgPrice"
          label="机构金额"
          align="center"
          min-width="150"
        ></el-table-column>
        <el-table-column
          label="审核老师"
          align="center"
          min-width="150"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            {{ scope.row.teacherName }}
          </template>
        </el-table-column>
        <el-table-column
          prop="wuLiu"
          label="物流单号"
          align="center"
          min-width="150"
          :show-overflow-tooltip="true"
        ></el-table-column> -->
        <el-table-column
          prop="remarks"
          label="备注说明"
          align="center"
          min-width="150"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="创建时间" align="center" min-width="155">
          <template slot-scope="scope">{{
            formatT(scope.row.createTime)
          }}</template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="200"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleEdit(scope.$index, scope.row)"
              >查看</el-button
            >
            <!-- <el-button
              type="text"
              @click="handleProcess(scope.row)"
            >流程
            </el-button> -->
            <el-button
              type="text"
              @click="handleEditOrder(scope.$index, scope.row)"
              v-hasPermi="['update']"
              v-if="scope.row.state == 4 || scope.row.state == 5 || scope.row.state == 6 || scope.row.state == 7"
              >编辑</el-button
            >
            <!-- <el-button
              type="text"
              @click="handleUpload(scope.$index, scope.row)"
              v-if="scope.row.state == 5 || scope.row.state == 6 || scope.row.state == 7
              "
              >电子证书</el-button
            > -->
            <!-- <el-button></el-button> -->
            <!-- <el-button
              type="danger"
              size="mini"
              @click="handleDelete(scope.row)"
              >删除</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
      <!-- </el-card> -->
      <div class="pagination">
        <pagination
          v-show="pageTotal > 0"
          :total="pageTotal"
          :page.sync="params.pageNum"
          :limit.sync="params.pageSize"
          @pagination="getData00"
        />
      </div>
    </div>
    <!-- 查看、编辑对话框 -->
    <el-dialog :title="title666" :visible.sync="dialogVisible" width="800px">
      <el-form
        ref="formData"
        :model="formData"
        :rules="rules2"
        label-width="140px"
        size="small"
        class="form-box"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="订单编号" prop="orderSn">
              <el-input v-model="formData.orderSn" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="咨询公司">
              <el-input
                v-model="formData.companyName"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证书名称" prop="certificateName">
              <el-input v-model="formData.certificateName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规格:" prop="specName">
              <el-input v-model="formData.specName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="对接人" prop="dockingPeople">
              <el-input
                v-model="formData.dockingPeople"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="dockingPhone">
              <el-input
                v-model="formData.dockingPhone"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="营业执照" prop="businessLicense">
              <div v-for="(item,index) in formData.businessLicense" class="avatar6" :key="index">
                <viewer>
                  <img :src="showUrl + item" alt="" width="200" height="180"/>
                </viewer>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电子证书出证时间" prop="edHisDate">
              <el-date-picker
                v-model="formData.edHisDate"
                type="date"
                placeholder="选择出证日期"
                value-format="yyyy-MM-dd"
                :disabled="editFlags"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纸质证书出证时间" prop="paperHisDate">
              <el-date-picker
                v-model="formData.paperHisDate"
                type="date"
                placeholder="选择出证日期"
                value-format="yyyy-MM-dd"
                :disabled="editFlags"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单状态" prop="state">
              <el-select
                v-model="formData.state"
                filterable
                placeholder="请选择"
                clearable
                disabled
              >
                <el-option
                  v-for="item in stateOptions"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="咨询费用" prop="consultingFee">
              <el-input v-model="formData.consultingFee" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证书金额" prop="price">
              <el-input v-model="formData.price" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="机构金额" prop="orgPrice">
              <el-input v-model="formData.orgPrice"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否需要咨询" prop="price">
              <el-select
                v-model="formData.consult"
                filterable
                placeholder="请选择"
                clearable
                disabled
              >
                <el-option label="需要" value="1"></el-option>
                <el-option label="不需要" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付状态" prop="orgPrice">
              <el-select
                v-model="formData.consultState"
                filterable
                placeholder="请选择"
                clearable
                :disabled="formData.consult == 2"
              >
                <el-option label="未付款" value="0"></el-option>
                <el-option label="已付款" value="1"></el-option>
                <el-option label="不需要支付" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="formData.state >=5">
            <el-form-item label="物流单号">
              <el-input
                v-model="formData.wuLiu"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input
                autosize
                type="textarea"
                v-model="formData.remarks"
                :disabled="editFlags"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="!editFlags">
            <el-form-item label="预付款凭证" prop="advancePic">
              <el-upload
                class="avatar-uploader"
                :action="baseUrl + '/goods/order/image/upload'"
                :show-file-list="false"
                :headers="headers"
                :on-success="handleAvatarSuccess2"
              >
                <img
                  v-if="formData.advancePic"
                  :src="showUrl + formData.advancePic"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="!editFlags&&formData.edHisPic&&formData.edHisPic!='null'">
            <el-form-item label="尾款凭证" prop="finalPic">
              <el-upload
                class="avatar-uploader"
                :action="baseUrl + '/goods/order/image/upload'"
                :show-file-list="false"
                :headers="headers"
                :on-success="handleAvatarSuccess3"
              >
                <img
                  v-if="formData.finalPic"
                  :src="showUrl + formData.finalPic"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="快递单号" v-if="formData.wuLiu">
              <el-input v-model="formData.wuLiu" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="title666 == '编辑订单'">
        <el-button @click="dialogVisible = false" size="mini">取消</el-button>
        <el-button @click="submitForm" type="primary" size="mini"
          >确定</el-button
        >
      </span>
    </el-dialog>

    <!-- 下载电子证书 -->
    <el-dialog :title="wuliuTitle" :visible.sync="wuliuVisible" width="50%">
      <el-form
        ref="wuliuForm"
        :model="wuliuForm"
        label-width="120px"
        :rules="wuliuRules"
      >
        <el-form-item label="电子证书：" prop="edHisPic">
          <div
            v-for="(item,index) in wuliuForm.edHisPic"
            :key="index"
            class="order_pic"
            ref="previewImg"
          >
            <img :src="showUrl + item" alt="" class="order_img" />
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="wuliuForm.edHisPic">
        <el-button type="primary" @click="exportPicFunc">下 载</el-button>
      </span>
    </el-dialog>

    <!-- 流程查看 -->
    <el-dialog title="流程查看" :visible.sync="dialogVisible1010" width="800px">     
      <div class="progress_box" v-for="(item,index) in steps" :key="index">
				<div class="left_c" v-if="item.finish == 1">已完成</div>
				<div class="left" v-if="item.finish == 0">处理中</div>
				<div class="center">
          <i class="el-icon-star-on" style="color:#000" v-if="item.finish == 1"></i>
          <i class="el-icon-star-on" style="color:#888" v-if="item.finish == 0"></i>
				</div>
				<!-- <div class="right_c"> -->
				<div :class="[item.finish==1?'right_c':'right']">
					<div class="top88" v-if="item.finish == 1">
						<span class="time88">{{item.updateTime}}</span>
						<span
              class="loading88"
              v-if="item.accessory && item.flowSerial != 18"
              @click="downLoadPaper(item.accessory)"
              >下载附件</span
            >
            <span
              class="loading88"
              v-if="item.accessory && item.flowSerial == 18"
              @click="ViewCert(item.accessory)"
              >预览证书</span
            >
					</div>
					<div class="title88">[{{item.flowName}}]</div>
					<div class="desc88" v-if="item.finish == 1 && item.context">{{item.context}}</div>
				</div>
			</div>
    </el-dialog>
    <!-- 预览证书 -->
    <el-dialog title="证书预览" :visible.sync="certVisible" width="700px">
      <div v-for="(item,index) in cert_view" :key="index" class="father_box">
        <img :src="showUrl + item.url" width="200" height="240"/>
        <div class="son_box">水印证书</div>
      </div>
    </el-dialog>

    <!-- 订单分配咨询老师 -->
    <el-dialog title="分配咨询老师" :visible.sync="teacherVisible" width="40%">
      <el-form
        ref="teacherForm"
        :model="teacherForm"
        label-width="100px"
        :rules="teacherRules"
      >
        <el-form-item label="咨询老师" prop="teacherId">
          <el-select
            v-model="teacherForm.teacherId"
            filterable
            placeholder="请选择"
            clearable
            style="width:360px"
          >
            <el-option
              v-for="item in teacherLists"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel_teacher">取 消</el-button>
        <el-button type="primary" @click="submit_teacher">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import DomToImage from "dom-to-image";
import {
  orderReceive_List,
  updateOrder,
  checkTeacher,
  record,
  delOrder,
  queryProcess,
  updateProcess,
  updateProcess1,
  fetchOrder_pt
} from "@/api/order/orderReceiveAds";
import { list } from "@/api/materialScience/materialScience";
import { certificateList } from "@/api/certificate/certificateAds";
import { teacherList, checkTeacherList } from "@/api/teacher/teacherAds";
import { getToken } from "@/utils/auth";
export default {
  components: {},
  props: [],
  data() {
    return {
      certVisible: false,
      cert_view: [],
      dialogVisible1010: false,
      steps: [],  // 流程

      baseUrl: process.env.VUE_APP_BASE_API,
      picsFileList: [],
      params11: {
        pageNum: 1,
        pageSize: 10
      },

      teacherId: undefined,
      teacherLists: [],
      dialogVisible_teacher: false,
      cateList2: [],
      // 非多个禁用
      multiple: true,
      //删除
      ids: [],
      headers: { Authorization: "Bearer " + getToken() },
      consultList: [
        { id: 1,title: '需咨询' },
        { id: 2,title: '不咨询' }
      ],
      consultListStates: [
        { id: '0',title: '未支付' },
        { id: '1',title: '已支付' }
      ],
      stateOptions: [
        {
          id: 3,
          title: "平台待接单"
        },
        {
          id: 4,
          title: "处理中"
        },
        {
          id: 5,
          title: "待出证"
        },
        {
          id: 6,
          title: "待签收"
        },
        {
          id: 7,
          title: "已完成"
        },
        {
          id: 8,
          title: "已拒绝"
        }
      ],
      title666: "",
      rules2: {
        phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
        companyName: [
          { required: true, message: "请输入公司名称", trigger: "blur" }
        ],
        linkman: [
          { required: true, message: "请输入联系人名称", trigger: "blur" }
        ],
        businessLicense: [
          { required: true, message: "请上传图片", trigger: "blur" }
        ],
        wuLiu: [{ required: true, message: "请填写物流单号", trigger: "blur" }]
      },
      input: "",
      openFlag: true,
      loading: true,
      //数据
      tableData: [],
      params: {
        pageNum: 1,
        pageSize: 10,
        position: 1 // 机构平台1
      },
      pageTotal: 0,
      dialogVisible: false, // 是否展示编辑页面
      // 新增/编辑数据
      formData: {
        businessLicense: ""
      },
      customer: {
        customerId: ""
      },
      paramsFlag: 0,
      editFlags: true,

      wuliuTitle: "",
      wuliuVisible: false,
      wuliuForm: {},
      wuliuRules: {
        edHisPic: [
          { required: true, message: "请上传电子证书", trigger: "blur" }
        ]
      },

      teacherVisible: false,
      teacherForm: {},
      teacherRules: {
        teacherId: [
          { required: true, message: "请选择一位老师", trigger: "blur" }
        ]
      }
    };
  },
  computed: {},
  created() {
    if(this.$route.params.state){
      this.params.state = this.$route.params.state;
      this.getData00()
    }else{
      this.getData00();
    };
    this.getTeacherData();
  },
  mounted() {
    this.changeType()
  },
  watch: {},
  methods: {
    // 触发流程
    process(id,flowSerial,context,accessory) {
      updateProcess1({
        orderId: id,
        flowSerial: flowSerial,
        // flowList:[{}],
        context: context,
        accessory: accessory,
        finish: 1
      }).then(res => {
        if (res.code == 200) {
          // this.$message.success("操作成功");
          // this.getData00();
          console.log('流程操作成功！')
        }else{
          this.$message.error("操作失败");
        }
      });
    },
    // 点击查看流程
    handleProcess(row){
      queryProcess({
        orderId: row.id
      }).then(res => {
        if(res.code == 200){
          res.rows[6].flowName='咨询老师做材料并上传-企业';
          res.rows[7].flowName='咨询老师做材料并上传-机构';
          this.steps = res.rows;
          this.dialogVisible1010 = true;
        }
      })
    },
    // 点击预览证书
    ViewCert(val){
      this.cert_view = JSON.parse(val);
      this.certVisible = true;
    },
    // 点击下载附件
    downLoadPaper(val){
      // console.log(val,'查询下载附件')
      let value = JSON.parse(val);
      let that = this;
      value.forEach(item => {
        this.downloadFile(item.url)
      })
    },
    downloadFile(url){
      const iframe = document.createElement("iframe");
      iframe.style.display = "none";  // 防止影响页面
      iframe.style.height = 0;  // 防止影响页面
      iframe.src = this.showUrl + url;
      document.body.appendChild(iframe);  // 这一行必须，iframe挂在到dom树上才会发请求
      // 1分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
      setTimeout(()=>{
        iframe.remove();
      }, 1 * 60 * 1000);
    },
    // 用于审批记录formatter回显
    queshi(row){
      let arr6 = [];
      // 字符串转数组
      arr6 = row.materialName.split(',');
      let arr8 = [];
      console.log(arr6);
      // 一级循环参照
      for(let i = 0;i<this.materialSciences.length;i++){
        // 二级循环赋值
        for(let j = 0;j<arr6.length;j++){
          if(this.materialSciences[i].id==arr6[j]){
            arr8.push(this.materialSciences[i].materialName)
          }
        }
      };
      return arr8.join(',')
    },
    // 获取材料列表
    changeType(){
        list({
          pageNum:1,
          pageSize:9999
        }).then(res => {
          console.log(res);
          if(res.code==200){
            this.materialSciences=res.rows;
            console.log(this.materialSciences);
          }
        })
    },
    // 付款凭证
    handleAvatarSuccess2(res){
      this.formData.advancePic = res.data;
    },
    // 尾款凭证
    handleAvatarSuccess3(res){
      this.formData.finalPic = res.data;
    },
    // 点击下载证书
    exportPicFunc() {
      let urls = this.wuliuForm.edHisPic;
      urls.forEach(item => {
        this.downLoad('电子证书',this.showUrl+item)
      })
    },
    getImageDataURL(image) {
      const canvas = document.createElement('canvas');
      canvas.width = image.width;
      canvas.height = image.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(image, 0, 0, image.width, image.height);
      const extension = image.src.substring(image.src.lastIndexOf('.') + 1).toLowerCase();
      return canvas.toDataURL('image/' + extension, 1);
    },
    downLoad(downloadName, url) {
      const tag = document.createElement('a');
      tag.setAttribute('download', downloadName.replace(/\./g, '。'));
      const image = new Image();
      image.src = url + '?time=' + new Date().getTime();
      image.setAttribute('crossOrigin', 'Anonymous');
      image.onload = () => {
        tag.href = this.getImageDataURL(image);
        tag.click();
      };
    },
    uploadImage(url){
      console.log(url)
      let image = new Image();
      image.src = url;
      image.onload = () => {
        console.log('asdasd')
        let canvas = document.createElement("canvas");  
        canvas.width = image.width;
        canvas.height = image.height;
        let ctx = canvas.getContext("2d");
        ctx.drawImage(image, 0, 0, image.width, image.height);
        canvas.toBlob(blob => {
          let url = URL.createObjectURL(blob);
          this.download(url, '电子证书');
          // 用完释放URL对象
          URL.revokeObjectURL(url);
        });
      };
      image.click()
      console.log('ok')
    },
    download(href, name) {
      let eleLink = document.createElement("a");
      eleLink.download = name;
      eleLink.href = href;
      eleLink.click();
      eleLink.remove();
    },
    // 图片列表超出限制数量
    uploadOverrun: function() {
      this.$message({
        type: "error",
        message: "上传文件个数超出限制!最多上传10张图片!"
      });
    },
    // 点击电子证书
    handleUpload(index, row) {
      this.wuliuTitle = "电子证书";
      this.wuliuForm = JSON.parse(JSON.stringify(row));
      if (!this.wuliuForm.edHisPic) {
        this.wuliuForm.edHisPic = [];
        this.picsFileList = [];
        this.$message.warning('当前无可下载的证书')
      } else {
        this.picsFileList = [];
        this.wuliuForm.edHisPic = JSON.parse(this.wuliuForm.edHisPic);
        this.wuliuForm.edHisPic.forEach(item => {
          this.picsFileList.push({
            name: this.wuliuForm.edHisPic,
            url: this.imgUrl + item
          });
        });
        this.wuliuVisible = true;
      }
    },
    // 图片列表上传成功
    handlePicsUrl(res, file, fileList) {
      if (res.code === 200) {
        this.wuliuForm.edHisPic.push(res.url);
      }
    },
    // 图片列表点击删除
    handleRemove(file) {
      for (var i = 0; i < this.wuliuForm.edHisPic.length; i++) {
        // 这里存在两种情况
        // 1. 如果所删除图片是刚刚上传的图片，那么图片地址是file.response.data.url
        //    此时的file.url虽然存在，但是是本机地址，而不是远程地址。
        // 2. 如果所删除图片是后台返回的已有图片，那么图片地址是file.url
        var url;
        if (file.response === undefined) {
          url = file.url;
        } else {
          url = file.response.data.url;
        }
        if (this.imgUrl + this.wuliuForm.edHisPic[i] === url) {
          this.wuliuForm.edHisPic.splice(i, 1);
        }
      }
      // for (var i = 0; i < this.wuliuForm.edHisPic.length; i++) {
      //   // 这里存在两种情况
      //   // 1. 如果所删除图片是刚刚上传的图片，那么图片地址是file.response.data.url
      //   //    此时的file.url虽然存在，但是是本机地址，而不是远程地址。
      //   // 2. 如果所删除图片是后台返回的已有图片，那么图片地址是file.url
      //   var url;
      //   if (file.response.code != 200) {
      //     url = file.url;
      //   } else {
      //     url = file.response.url;
      //   }
      //   // console.log(url,'url')
      //   // console.log(this.wuliuForm.edHisPic[i],'pic')
      //   if (this.wuliuForm.edHisPic[i] == url) {
      //     this.wuliuForm.edHisPic.splice(i, 1);
      //     this.$refs.pictureUpload.handleRemove(file);
      //   }
      //   // console.log(this.wuliuForm.edHisPic,'544554')
      // }
    },

    getTeacherData() {
      checkTeacherList({
        pageNum: 1,
        pageSize: 1000
      }).then(res => {
        this.teacherLists = res.data;
      });
    },
    allowed(row) {
      this.teacherVisible = true;
      this.teacherForm = {};
      this.teacherForm.orderId = row.id;
    },
    cancel_teacher() {
      this.teacherVisible = false;
      this.teacherForm = {};
      this.getData00();
    },
    submit_teacher() {
      this.$refs["teacherForm"].validate(valid => {
        if (valid) {
          checkTeacher({
            teacherId: this.teacherForm.teacherId,
            orderId: this.teacherForm.orderId
          }).then(res => {
            if (res.code == 200) {
              this.$message.success("指派老师成功！");
              this.getData00();
              this.teacherVisible = false;
              this.teacherForm = {};
            } else {
              this.$message.error("指派老师失败！");
              this.getData00();
              this.teacherVisible = false;
              this.teacherForm = {};
            }
          });
        }
      });
    },

    sumitPost() {
      this.$refs["wuliuForm"].validate(valid => {
        if (valid) {
          this.wuliuForm.edHisPic = JSON.stringify(this.wuliuForm.edHisPic);
          updateOrder(this.wuliuForm).then(res => {
            if (res.code == 200) {
              this.$message.success("保存成功");
              this.wuliuVisible = false;
              this.wuliuForm = {};
              this.getData00();
            } else {
              this.$message.error("保存失败");
              this.wuliuVisible = false;
              this.getData00();
            }
          });
        }
      });
    },
    cancelPost() {
      this.wuliuVisible = false;
      this.wuliuForm.trackingNumber = "";
    },

    // 查询证书类别列表
    getCateList() {
      this.loading = true;
      certificateList({
        pageNum: 1,
        pageSize: 9999
      }).then(res => {
        this.loading = false;
        if (res.code == 200) {
          this.cateList2 = res.rows;
          // this.cateList = res.rows;
        } else {
          this.msgError("查询失败！");
        }
      });
    },
    querySearch(queryString, cb) {
      console.log(queryString, this.cateList2);
      var restaurants = this.cateList2;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.categoryName
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    // 键值配对
    status(val) {
      var str = this.stateOptions.find(function(item) {
        return item.id == val;
      });
      if (str) return str.title;
    },
    status_consult(val){
      let str = this.consultList.find(function(item){
        return item.id == val;
      })
      if(str) return str.title;
    },
    // 键值配对
    status2(val) {
      var str = this.cateList2.find(function(item) {
        return item.id == val;
      });
      if (str) return str.categoryName;
    },
    handleAvatarSuccess(res, file) {
      if (res.code == 200) {
        this.formData.businessLicense = res.url;
        // console.log(this.formData.businessLicense);
        this.$message.success(`上传成功`);
      }
    },
    // 新增修改的方法
    submitForm() {
      this.$refs["formData"].validate(valid => {
        if (valid) {
          this.formData.businessLicense = JSON.stringify(
            this.formData.businessLicense
          );
          this.formData.edHisPic = JSON.stringify(
            this.formData.edHisPic
          );
          if(this.formData.advancePic){
            let url = [];
            let obj = {};
            obj.url = this.formData.advancePic;
            url.push(obj);
            this.formData.advancePic = JSON.stringify(url);
            this.process(this.formData.id,9,'',this.formData.advancePic);
          }
          if(this.formData.finalPic){
            let url1 = [];
            let obj1 = {};
            obj1.url = this.formData.finalPic;
            url1.push(obj1);
            this.formData.finalPic = JSON.stringify(url1);
            this.process(this.formData.id,19,'',this.formData.finalPic);
            console.log(this.formData.edHisPic,'上传清晰证');
            this.process(this.formData.id,20,'',this.formData.edHisPic);
          }
          updateOrder(this.formData).then(res => {
            if (res.code == 200) {
              this.$message.success("保存成功");
              this.dialogVisible = false;
              this.formData = {};
              this.getData00();
            } else {
              this.$message.error("保存失败");
              this.dialogVisible = false;
              this.getData00();
            }
          });
        }
      });
    },
    // 打开搜索
    openSearch() {
      this.openFlag = !this.openFlag;
    },
    // 重置搜索框
    cancelData() {
      this.params = {
        pageNum: 1,
        pageSize: 10,
        position: 1 // 机构平台1
      }
      this.resetForm("params");
      this.getData00();
    },
    handleAdd() {
      this.formData = {
        businessLicense: ""
      };
      this.dialogVisible = true;
      this.title666 = "新增";
    },
    handleEdit(index, row) {
      let rowCopy = JSON.parse(JSON.stringify(row));
      this.formData = rowCopy;
      // console.log(this.formData, "表单-----------");
      this.formData.businessLicense = JSON.parse(row.businessLicense);
      this.editFlags = true;
      this.dialogVisible = true;
      this.title666 = "查看";
    },
    handleEditOrder(index, row) {
      this.editFlags = false;
      let rowCopy = JSON.parse(JSON.stringify(row));
      this.formData = rowCopy;
      if(row.businessLicense){
        this.formData.businessLicense = JSON.parse(row.businessLicense);
      };
      if(row.edHisPic){
        this.formData.edHisPic = JSON.parse(row.edHisPic);
      };
      this.dialogVisible = true;
      this.title666 = "编辑订单";
      if(row.advancePic){
        this.formData.advancePic = JSON.parse(row.advancePic)[0].url;
      }
      if(row.finalPic){
        this.formData.finalPic = JSON.parse(row.finalPic)[0].url;
      }
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    // 删除操作
    handleSelectionChange(val) {
      this.ids = val.map(item => item.id);
      this.single = val.length != 1;
      this.multiple = !val.length;
    },
    // 批量删除
    handleDelete(row) {
      const id = row.id || this.ids;
      this.$confirm("是否确认删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return delOrder(id);
        })
        .then(() => {
          this.getData00();
          this.msgSuccess("删除成功");
        })
        .catch(function() {});
    },
    //获取数据
    getData00() {
      fetchOrder_pt(this.params).then(res => {
        if (res.code == "200") {
          this.tableData = res.rows;
          this.pageTotal = res.total;
          this.loading = false;
        }
      });
    },
    // 触发搜索按钮
    search() {
      this.$set(this.params, "pageNum", 1);
      this.paramsFlag = 0;
      this.getData00();
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.params, "pageNum", val);
      this.getData00();
    }
  }
};
</script>

<style scoped>
.avatar-uploader .el-upload {
  width: 148px;
  height: 148px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
  border: 1px dashed #ccc;
}

.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
.resource {
  padding: 30px;
}
.container {
  margin-top: 20px;
}
.handle-box {
  margin-bottom: 10px;
}

.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.yellow {
  color: #f57506;
}
.green {
  color: green;
  cursor: pointer;
}
.blue2 {
  color: #409eff;
}
.blue {
  color: #409eff;
  cursor: pointer;
  text-decoration: underline;
}
.mr10 {
  margin-right: 10px;
}

.searchForm .el-form-item--mini.el-form-item,
.searchForm .el-form-item--small.el-form-item {
  margin-bottom: 1px;
}
.study_pic {
  display: block;
  width: 100px;
  height: 85px;
  margin: auto;
  /* border-radius: 50%; */
}
.avatar {
  display: inline-block;
  margin-right: 10px;
  position: relative;
}
.avatar img {
  width: 200px;
}
.avatar6 {
  display: inline-block;
  margin-right: 10px;
  position: relative;
}
.avatar6 img {
  width: 200px;
}
.order_pic {
  display: inline-block;
  margin-right: 20px;
}
.order_img {
  width: 120px;
  height: 150px;
}

.progress_box{
  width: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 10px 30px;
  margin: 0 auto;
  justify-content: space-between;
  background-color: #fff;
  /* align-items: center; */
}
.progress_box .left{
  width: 15%;
  color: #888;
  font-size: 14px;
}
.progress_box .left_c{
  width: 15%;
  color: #444;
  font-weight: bold;
  font-size: 14px;
}
.progress_box .right{
  width: 75%;
  color: #888;
  font-size: 14px;
}
.progress_box .right_c{
  width: 75%;
  color: #444;
  font-size: 14px;
}
.progress_box .center{
  width: 10%;
  text-align: center;
  line-height: 1;
  /* display: flex;
  align-items: center; */
}
.top88{
  display: flex;
  align-items: center;
}
.title88{
  display: flex;
  align-items: center;
  margin: 0px 0 10px;
  font-weight: bold;
}
.time88 {
  margin-bottom: 10px;
}
.desc88{
  margin-bottom: 10px;
}
.loading88{
  color: #3D6FFF;
  margin-left: 40px;
  cursor: pointer;
}
.father_box {
  position: relative;
  display: inline-block;
  margin-right: 20px;
}
.son_box {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 240px;
  background-color: rgba(0,0,0,.3);
  text-align: center;
  line-height: 240px;
  font-size: 30px;
  color: #fff;
}
</style>
